<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
        <style>* {padding: 0; margin: 0}</style>
    </head>
    <script src="../js/pixi4.4.5.js"></script>
    <body>
        <script type="text/javascript">
            //Create a Pixi Application
            let app = new PIXI.Application({ 
              width: 1000,         // default: 800 宽度
              height: 1500,        // default: 600 高度
              antialias: true,    // default: false 反锯齿
              transparent: false, // default: false 透明度
              resolution: 1 ,      // default: 1 分辨率
              renderer: {
                backgroundColor: '#cccc'
              }
            }
          );

        //Add the canvas that Pixi automatically created for you to the HTML document
        document.body.appendChild(app.view);

        console.log(PIXI);
        PIXI.loader
          .add("../images/bird.png")
          .load(setup);

        let bird
        function setup() {
          bird = new PIXI.Sprite(
            PIXI.loader.resources["../images/bird.png"].texture
          );
          bird.x = 96;
          bird.y = 96;
          bird.width = '200'
          bird.height = '200'
          app.stage.addChild(bird);
          app.ticker.add(delta => gameLoop(delta));
        }

        function gameLoop(delta){
          //Update the cat's velocity
          bird.vx = 1;
          bird.vy = 1;

          //Apply the velocity values to the bird's 
          //position to make it move
          bird.x += bird.vx;
          bird.y += bird.vy;
        }
        
        
        </script>
    </body>
</html>